<template>
	<view class="main">
		<navBar title="我的" :home="true"></navBar>
		<view class="userClass">
			<!-- <u-avatar size="60" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.w9wn-UJ7dV9g2r_CP1nSqwHaHa?w=205&h=206&c=7&r=0&o=5&dpr=2.2&pid=1.7"></u-avatar> -->
			<cover-image class="img" :src="avatar"></cover-image>
			<view class="text">
				<text>{{userName}}</text>
				<text>{{userPhone}}</text>
			</view>
		</view>
		<view class="userMain">
			<text>个性签名：{{userMain}}</text>
		</view>
		<view class="userData">
			<view class="user" @click="jump('/myBlog/myBlog')">
				<u-icon name="order" color="#2979ff" size="28"></u-icon>
				<text class="text">我的博客</text>
				<u-icon name="arrow-right" color="#2979ff" size="25"></u-icon>
			</view>
			<view class="user" @click="jump('/myAttention/myAttention')">
				<u-icon name="star" color="#2979ff" size="28"></u-icon>
				<text class="text">我的关注</text>
				<u-icon name="arrow-right" color="#2979ff" size="25"></u-icon>
			</view>
			<view class="user" @click="jump('/myPraise/myPraise')">
				<u-icon name="thumb-up" color="#2979ff" size="28"></u-icon>
				<text class="text">我赞过的</text>
				<u-icon name="arrow-right" color="#2979ff" size="25"></u-icon>
			</view>
		</view>
		<view class="amend">
			<view class="user" @click="jump('/changeUserdata/changeUserdata')">
				<u-icon name="setting" color="#2979ff" size="28"></u-icon>
				<text class="text">修改个人信息</text>
				<u-icon name="arrow-right" color="#2979ff" size="25"></u-icon>
			</view>
		</view>
		<view class="btn" @click="exit">
			<u-button type="primary" size="large " shape="circle" text="退出登录"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		message
	} from '@/config/api.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				avatar: '',
				userName: '',
				userPhone: '',
				userMain: ''
			}
		},
		onShow() {
			//	如果用户没有登陆，则跳转到登陆页
			if (!this.userInfo) {
				uni.navigateTo({
					url: '/subpages/login/login'
				})
			}
			this.initmessages()
		},
		methods: {
			...mapMutations(['userExit']),
			async initmessages() {
				const user = this.userInfo
				console.log(user.token, user.id);
				const messageData = await message(user.id, user.token)
				console.log(messageData);
				this.avatar = messageData.data.avatar
				this.userName = messageData.data.name
				this.userPhone = messageData.data.phone
				this.userMain = messageData.data.desc
				console.log(this.avatar);
			},
			jump(url) {
				uni.navigateTo({
					url: `/subpages${url}`
				})
			},
			exit() {
				this.userExit()
				uni.navigateTo({
					url: '/subpages/login/login'
				})
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.userClass {
		margin-top: 3vh;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 85vw;
		height: 15vh;
		background-color: #FFFFFF;
		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		border-radius: 5vw;

		.img {
			width: 18vw;
			height: 18vw;
			border-radius: 50%;
		}

		.text {
			width: 50vw;
			height: 8vh;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #C2BCB9;
		}
	}

	.userMain {
		margin-top: 2vh;
		padding: 3vh;
		background-color: #FFFFFF;
		width: 74vw;
		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		border-radius: 5vw;
	}

	.userData {
		margin-top: 2vh;
		padding: 2vw 5vw 3vh 3vh;
		width: 74vw;
		background-color: #FFFFFF;
		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		border-radius: 5vw;

		.user {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 8vh;
			border-bottom: 1px solid #C2BCB9;

			.text {
				width: 60%;
			}
		}
	}

	.amend {
		margin-top: 2vh;
		padding: 2vw 5vw 2vh 3vh;
		width: 74vw;
		background-color: #FFFFFF;
		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		border-radius: 5vw;

		.user {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 6vh;
			border-bottom: 1px solid #C2BCB9;

			.text {
				width: 60%;
			}
		}
	}

	.btn {
		width: 85vw;
		height: 15vh;
		margin-top: 3vh;
	}
</style>
